<!doctype html><head><meta charset="utf-8"></head><style>.mydoc_api_title{
    margin: 35px 0 0.8em;
}
.mydoc_api_title_a{
    font-size: 1.5em;
    text-decoration: none;
    color: #2c3e50;
    text-align: center;
}
.mydoc_api_title_a::before{
    content: '';
    display: block;
    margin-top: -40px;
    height: 40px;
    visibility: hidden;
}
.mydoc_api_title_h2{
    margin: 5px 0 8px;
    font-size: 22px;
    padding-bottom: 1em;
}
.mydoc_api_title_content{

}.mydoc_api_npm-info{
    line-height: 1.6em;
    margin: 1.2em 0 -1.2em;
    padding-bottom: 1.2em;
    position: relative;
    z-index: 1;
}.mydoc_p{
    line-height: 1.6em;
    margin: 1.2em 0 -1.2em;
    padding-bottom: 1.2em;
    position: relative;
    z-index: 1;
    color: #333;
}.mydoc_strong{
    font-weight: 600;
    color: #2c3e50;
}.mydoc_h2{
    margin: 35px 0 0.8em;
}
.mydoc_h2_a{
    font-size: 1.5em;
    text-decoration: none;
    color: #2c3e50;
}
.mydoc_h2_a::before{
    content: '';
    display: block;
    margin-top: -40px;
    height: 40px;
    visibility: hidden;
}
.mydoc_h2_h2{
    margin: 5px 0 8px;
    border-bottom: 1px solid #ddd;
    font-size: 22px;
    padding-bottom: 1em;
}
.mydoc_h2_content{

}.mydoc_a{
    color: #42b983;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
.mydoc_code{
    overflow-x: auto;
    position: relative;
    background-color: #f8f8f8;
    padding: 0;
    line-height: 1.1em;
    border-radius: 2px;
    margin: 1.2em 0;
    background-image: url('');
}
.mydoc_code_pre{
    padding: 1.2em 1.4em;
    line-height: 1.5em;
    margin: 0;
}.mydoc_h3{
    margin: 35px 0 0.8em;
}
.mydoc_h3_a{
    font-size: 1.3em;
    text-decoration: none;
    color: #2c3e50;
}
.mydoc_h3_a::before{
    content: '';
    display: block;
    margin-top: -30px;
    height: 30px;
    visibility: hidden;
}
.mydoc_h3_h3{
    margin: 5px 0 8px;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    padding-bottom: .6em;
}
.mydoc_h3_content{

}:not(.mydoc_li) + .mydoc_li, .mydoc_li:first-child{
    margin-top: 10px;
}
.mydoc_li + .mydoc_li{
    margin-top: -10px;
}

.mydoc_li{
    margin: 0;
    color: #34495e;
    margin-bottom: 10px;
    position: relative;
}.mydoc_span{
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}.mydoc_api_html-example{
    border: none;
    position: relative;
}
.mydoc_api_html-example_iframe{
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: rgb(247, 247, 249);
    border: 1px solid rgb(225, 225, 232);
    border-radius: 0px 0px 4px 4px;
    background: white;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.mydoc_api_html-example_tip{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 0;
    font-size: 12px;
    text-align: center;
}
.mydoc_api_html-example_summary{
    cursor: pointer;
}.mydoc{
    font-size: 14px;
    overflow: hidden;
}</style>
<article class='mydoc'>
    <div class="mydoc_api_title">
                    <a class="mydoc_api_title_a">
                        <h2 class="mydoc_api_title_h2">vue-element-resize-event</h2>
                    </a>
                    <div class="mydoc_api_title_content">
                        
                    </div>
                </div><p class="mydoc_api_npm-info" align="center">
                <a href="https://www.npmjs.com/package/vue-element-resize-event"><img src="https://img.shields.io/npm/v/vue-element-resize-event.svg" alt="Version"></a>
                <a href="https://www.npmjs.com/package/vue-element-resize-event"><img src="https://img.shields.io/npm/dm/vue-element-resize-event.svg" alt="Downloads"></a>
                <a href="https://www.npmjs.com/package/vue-element-resize-event"><img src="https://img.shields.io/npm/l/vue-element-resize-event.svg" alt="License"></a>
            </p><table cellspacing="1" style="margin: 0 auto;font-size: 14px;background-color: #f9f9f9;color: #036;padding: 3px;border-radius: 4px;border: 1px solid rgba(220, 220, 220, .5);">
    <colgroup width="100" span="7" align="center"></colgroup>
    <tr style="height: 30px;">
        <th align="center">Android</td><th align="center">Firefox</td><th align="center">Chrome</td><th align="center">IE</td><th align="center">iPhone</td><th align="center">Edge</td><th align="center">Safari</td>
    </tr>
    <tr style="color: #000;line-height: 28px;font-weight: bold;">
        <td align="center" style="background-color: #60d848">>=4.4</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">>=9</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">√</td>
    </tr>
</table><p class="mydoc_p"> <strong class="mydoc_strong">vue-element-resize-event</strong>，简称elresize，是一个扩展vue事件的插件，使vue可以监听普通元素的resize事件。HTML中如果在页面或框架被调整大小时会触发resize事件，但是普通元素尺寸变化的时候却没有对应的事件。<strong class="mydoc_strong">vue-element-resize-event</strong>基于js的奇巧淫技可以模拟出这个事件。</p><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">源码</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> <a class="mydoc_a" href="https://github.com/laden666666/vue-element-resize-event">github</a>，<a class="mydoc_a" href="https://gitee.com/laden666666/vue-element-resize-event">码云</a></p>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">安装</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse">npm install vue<span class="token operator">-</span>element<span class="token operator">-</span>resize<span class="token operator">-</span>event</pre>
                </figure><p class="mydoc_p"> 可以采用插件形式的全局安装：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> ElResize <span class="token keyword">from</span> <span class="token string">'vue-element-resize-event'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElResize<span class="token punctuation">)</span></pre>
                </figure><p class="mydoc_p"> 也可以采用局部安装：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token keyword">import</span> <span class="token punctuation">{</span>
    elresizeDirective<span class="token punctuation">,</span>
    elresize<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-element-resize-event'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
    directive<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        elresizeDirective<span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        elresize<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></pre>
                </figure>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">使用</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> vue-element-resize-event提供了两种使用方式——directive和component。</p><div class="mydoc_h3">
                <a class="mydoc_h3_a">
                    <h3 class="mydoc_h3_h3">指令</h3>
                </a>
                <div class="mydoc_h3_content">
                    <p class="mydoc_p"> 使用<span class="mydoc_span">v-elresize</span>指令监听elresize事件。要求v-elresize所在的元素的position值不能为static：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">v-elresize</span> <span class="token attr-name">@elresize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>doc</span><span class="token punctuation">></span></span></pre>
                </figure>
<div class="mydoc_api_html-example">
    <iframe class="mydoc_api_html-example_iframe"  
            
        srcdoc="<!DOCTYPE html>
<!DOCTYPE html>
<html lang=&#34;en&#34;>
<head>
    <script src=&#34;https://cdn.jsdelivr.net/npm/vue&#34;></script>
    <script src=&#34;./vue-element-resize-event.js&#34;></script>
    <style>
        body, html{
            padding: 0;
            margin: 0;
        }
        .test{
            margin: 0;
            background: #e6e6e6;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
        }
        .elresize{
            background: red;
            width: 100px;
            height: 100px;
            resize: both;
        }
        .box {
            position: relative;
            background: #2ecc71;
        }
        .label{
            width: 220px;
            height: 40px;
            line-height: 40px;
            text-align: left;
        }
        .title{
            width: 50px;
            display: inline-block;
        }
        .range{
            width: 140px;
            -webkit-appearance: none;
            background: #059CFA;
            height: 3px;
            outline: none;
            vertical-align: middle;
        }
        .range::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 26px;
            width: 26px;
            background: #fff;
            border-radius: 50%;
            border: solid 1px #ddd;
        }
    </style>

</head>
<body>

    <div id=&#34;app&#34;>
        <div class=&#34;test&#34;>
            <label class=&#34;label&#34;>
                <span class=&#34;title&#34;>width:</span>
                <input id=&#34;widthInput&#34; type=&#34;range&#34; class=&#34;range&#34; max=&#34;200&#34; min=&#34;100&#34; v-model=&#34;width&#34;>px
            </label>

            <Elresize class=&#34;box&#34; :style=&#34;{width: width + 'px', height: '100px'}&#34; @elresize=&#34;test&#34;>
                resize count : {{resizeCount}}
            </Elresize>
        </div>
    </div>
    <script>
        Vue.use(vueElementResizeEvent)
        var app = new Vue({
            el: '#app',
            data: {
                width: '200',
                resizeCount: 0
            },
            methods: {
                test(e){
                    this.resizeCount++
                },
            }
        })
    </script>
</body>
</html>
"></iframe>
    <div class="mydoc_api_html-example_tip">Your browser does not support the srcdoc attribute in the iframe. Or CSP prohibits the use of iframes.</div>
    
    <details>
        <summary class="mydoc_api_html-example_summary">view code</summary>
        <p>
<figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>head<span class="token operator">></span>
    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"./vue-element-resize-event.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
    <span class="token operator">&lt;</span>style<span class="token operator">></span>
        body<span class="token punctuation">,</span> html<span class="token punctuation">{</span>
            padding<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
            margin<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>test<span class="token punctuation">{</span>
            margin<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #e6e6e6<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">100</span>vh<span class="token punctuation">;</span>
            display<span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
            flex<span class="token operator">-</span>direction<span class="token punctuation">:</span> column<span class="token punctuation">;</span>
            align<span class="token operator">-</span>items<span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            padding<span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
            box<span class="token operator">-</span>sizing<span class="token punctuation">:</span> border<span class="token operator">-</span>box<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>elresize<span class="token punctuation">{</span>
            background<span class="token punctuation">:</span> red<span class="token punctuation">;</span>
            width<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
            resize<span class="token punctuation">:</span> both<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>box <span class="token punctuation">{</span>
            position<span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #<span class="token number">2</span>ecc71<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>label<span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> <span class="token number">220</span>px<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
            line<span class="token operator">-</span>height<span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
            text<span class="token operator">-</span>align<span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>title<span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
            display<span class="token punctuation">:</span> inline<span class="token operator">-</span>block<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>range<span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> <span class="token number">140</span>px<span class="token punctuation">;</span>
            <span class="token operator">-</span>webkit<span class="token operator">-</span>appearance<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #<span class="token number">059</span>CFA<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">3</span>px<span class="token punctuation">;</span>
            outline<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            vertical<span class="token operator">-</span>align<span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>range<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token operator">-</span>webkit<span class="token operator">-</span>slider<span class="token operator">-</span>thumb <span class="token punctuation">{</span>
            <span class="token operator">-</span>webkit<span class="token operator">-</span>appearance<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">26</span>px<span class="token punctuation">;</span>
            width<span class="token punctuation">:</span> <span class="token number">26</span>px<span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
            border<span class="token operator">-</span>radius<span class="token punctuation">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
            border<span class="token punctuation">:</span> solid <span class="token number">1</span>px #ddd<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">></span>

<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token operator">&lt;</span>body<span class="token operator">></span>

    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"test"</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>label <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"label"</span><span class="token operator">></span>
                <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"title"</span><span class="token operator">></span>width<span class="token punctuation">:</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>
                <span class="token operator">&lt;</span>input id<span class="token operator">=</span><span class="token string">"widthInput"</span> type<span class="token operator">=</span><span class="token string">"range"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"range"</span> max<span class="token operator">=</span><span class="token string">"200"</span> min<span class="token operator">=</span><span class="token string">"100"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"width"</span><span class="token operator">></span>px
            <span class="token operator">&lt;</span><span class="token operator">/</span>label<span class="token operator">></span>

            <span class="token operator">&lt;</span>Elresize <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box"</span> <span class="token punctuation">:</span>style<span class="token operator">=</span><span class="token string">"{width: width + 'px', height: '100px'}"</span> @elresize<span class="token operator">=</span><span class="token string">"test"</span><span class="token operator">></span>
                resize count <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>resizeCount<span class="token punctuation">}</span><span class="token punctuation">}</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>Elresize<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span>script<span class="token operator">></span>
        Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vueElementResizeEvent<span class="token punctuation">)</span>
        <span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
            data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                width<span class="token punctuation">:</span> <span class="token string">'200'</span><span class="token punctuation">,</span>
                resizeCount<span class="token punctuation">:</span> <span class="token number">0</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                <span class="token function">test</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>resizeCount<span class="token operator">++</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">></span></pre>
                </figure></p>
        </details>
    
    </div>

                </div>
            </div><div class="mydoc_h3">
                <a class="mydoc_h3_a">
                    <h3 class="mydoc_h3_h3">控件</h3>
                </a>
                <div class="mydoc_h3_content">
                    <p class="mydoc_p"> 使用<span class="mydoc_span">Elresize</span>控件监听elresize事件：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Elresize</span> <span class="token attr-name">@elresize</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Elresize</span><span class="token punctuation">></span></span></pre>
                </figure>
<div class="mydoc_api_html-example">
    <iframe class="mydoc_api_html-example_iframe"  
            
        srcdoc="<!DOCTYPE html>
<!DOCTYPE html>
<html lang=&#34;en&#34;>
<head>
    <script src=&#34;https://cdn.jsdelivr.net/npm/vue&#34;></script>
    <script src=&#34;./vue-element-resize-event.js&#34;></script>
    <style>
        body, html{
            padding: 0;
            margin: 0;
        }
        .test{
            margin: 0;
            background: #e6e6e6;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
        }
        .elresize{
            background: red;
            width: 100px;
            height: 100px;
            resize: both;
        }
        .box {
            position: relative;
            background: #2ecc71;
        }
        .label{
            width: 220px;
            height: 40px;
            line-height: 40px;
            text-align: left;
        }
        .title{
            width: 50px;
            display: inline-block;
        }
        .range{
            width: 140px;
            -webkit-appearance: none;
            background: #059CFA;
            height: 3px;
            outline: none;
            vertical-align: middle;
        }
        .range::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 26px;
            width: 26px;
            background: #fff;
            border-radius: 50%;
            border: solid 1px #ddd;
        }
    </style>

</head>
<body>

    <div id=&#34;app&#34;>
        <div class=&#34;test&#34;>
            <label class=&#34;label&#34;>
                <span class=&#34;title&#34;>width:</span>
                <input id=&#34;widthInput&#34; type=&#34;range&#34; class=&#34;range&#34; max=&#34;200&#34; min=&#34;100&#34; v-model=&#34;width&#34;>px
            </label>

            <Elresize class=&#34;box&#34; :style=&#34;{width: width + 'px', height: '100px'}&#34; @elresize=&#34;test&#34;>
                resize count : {{resizeCount}}
            </Elresize>
        </div>
    </div>
    <script>
        Vue.use(vueElementResizeEvent)
        var app = new Vue({
            el: '#app',
            data: {
                width: '200',
                resizeCount: 0
            },
            methods: {
                test(e){
                    this.resizeCount++
                },
            }
        })
    </script>
</body>
</html>


"></iframe>
    <div class="mydoc_api_html-example_tip">Your browser does not support the srcdoc attribute in the iframe. Or CSP prohibits the use of iframes.</div>
    
    <details>
        <summary class="mydoc_api_html-example_summary">view code</summary>
        <p>
<figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>head<span class="token operator">></span>
    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"./vue-element-resize-event.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
    <span class="token operator">&lt;</span>style<span class="token operator">></span>
        body<span class="token punctuation">,</span> html<span class="token punctuation">{</span>
            padding<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
            margin<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>test<span class="token punctuation">{</span>
            margin<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #e6e6e6<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">100</span>vh<span class="token punctuation">;</span>
            display<span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
            flex<span class="token operator">-</span>direction<span class="token punctuation">:</span> column<span class="token punctuation">;</span>
            align<span class="token operator">-</span>items<span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            padding<span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
            box<span class="token operator">-</span>sizing<span class="token punctuation">:</span> border<span class="token operator">-</span>box<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>elresize<span class="token punctuation">{</span>
            background<span class="token punctuation">:</span> red<span class="token punctuation">;</span>
            width<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
            resize<span class="token punctuation">:</span> both<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>box <span class="token punctuation">{</span>
            position<span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #<span class="token number">2</span>ecc71<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>label<span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> <span class="token number">220</span>px<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
            line<span class="token operator">-</span>height<span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
            text<span class="token operator">-</span>align<span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>title<span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
            display<span class="token punctuation">:</span> inline<span class="token operator">-</span>block<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>range<span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> <span class="token number">140</span>px<span class="token punctuation">;</span>
            <span class="token operator">-</span>webkit<span class="token operator">-</span>appearance<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #<span class="token number">059</span>CFA<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">3</span>px<span class="token punctuation">;</span>
            outline<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            vertical<span class="token operator">-</span>align<span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>range<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token operator">-</span>webkit<span class="token operator">-</span>slider<span class="token operator">-</span>thumb <span class="token punctuation">{</span>
            <span class="token operator">-</span>webkit<span class="token operator">-</span>appearance<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">26</span>px<span class="token punctuation">;</span>
            width<span class="token punctuation">:</span> <span class="token number">26</span>px<span class="token punctuation">;</span>
            background<span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
            border<span class="token operator">-</span>radius<span class="token punctuation">:</span> <span class="token number">50</span><span class="token operator">%</span><span class="token punctuation">;</span>
            border<span class="token punctuation">:</span> solid <span class="token number">1</span>px #ddd<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">></span>

<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token operator">&lt;</span>body<span class="token operator">></span>

    <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"test"</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>label <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"label"</span><span class="token operator">></span>
                <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"title"</span><span class="token operator">></span>width<span class="token punctuation">:</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>
                <span class="token operator">&lt;</span>input id<span class="token operator">=</span><span class="token string">"widthInput"</span> type<span class="token operator">=</span><span class="token string">"range"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"range"</span> max<span class="token operator">=</span><span class="token string">"200"</span> min<span class="token operator">=</span><span class="token string">"100"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"width"</span><span class="token operator">></span>px
            <span class="token operator">&lt;</span><span class="token operator">/</span>label<span class="token operator">></span>

            <span class="token operator">&lt;</span>Elresize <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box"</span> <span class="token punctuation">:</span>style<span class="token operator">=</span><span class="token string">"{width: width + 'px', height: '100px'}"</span> @elresize<span class="token operator">=</span><span class="token string">"test"</span><span class="token operator">></span>
                resize count <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>resizeCount<span class="token punctuation">}</span><span class="token punctuation">}</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>Elresize<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span>script<span class="token operator">></span>
        Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vueElementResizeEvent<span class="token punctuation">)</span>
        <span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
            data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                width<span class="token punctuation">:</span> <span class="token string">'200'</span><span class="token punctuation">,</span>
                resizeCount<span class="token punctuation">:</span> <span class="token number">0</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                <span class="token function">test</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>resizeCount<span class="token operator">++</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">></span></pre>
                </figure></p>
        </details>
    
    </div>

                </div>
            </div>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">原理</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> 模拟resize事件目前主要有两种：</p><ul class="mydoc_li"><li> 方法一，监听scroll事件：</li></ul><p class="mydoc_p"> 要求可以监听resize事件的元素的css的position属性不可以是static，然后创建两个和该元素等大的div，一个监听元素放大事件，一个监听元素缩小事件。两个div都是绝对定位，并且css的visibility属性是hidden，同时使用js将水平和垂直滚动条的值都设置大最大。实现的例子有：<a class="mydoc_a" href="https://github.com/KyleAMathews/element-resize-event">KyleAMathews/element-resize-event</a></p><ul class="mydoc_li"><li> 方法二，监听object（iframe）的resize事件：</li></ul><p class="mydoc_p"> 同样要求可以监听resize事件的元素的css的position属性不可以是static，然后创建一个iframe或者object。因为frame和object可以监听resize事件，所以只要要求frame或object和被监听元素等大，就可以让frame或object的resize事件实现该元素的resize事件了。实现的例子有：<a class="mydoc_a" href="https://github.com/developit/simple-element-resize-detector">developit/simple-element-resize-detector</a></p><p class="mydoc_p"> 因为object（iframe）更耗费资源，而且会被CSP策略限制，所以vue-element-resize-event选用了第一种方法。</p>
                    </div>
                </div>
</article>